<template>
	<view class="content">
		<view v-if="!local_post.sorted && concateResource.length>0" class="top">
			<view @click="opneImg(item,index)" v-for="(item,index) in concateResource.slice(0, 3)" :style="{
				 backgroundImage:`url(${item.path})`,
				 width: `calc(100% / ${concateResource.length})`
			 }" v-if="getType(item.suffix[0])=='img'" :key="item.the_key" class="img">
				<view v-if="index == 2 && concateResource.length>=3" class="more">
					查看详情
				</view>
			</view>
			<view @click="openVideo(item,index)" v-for="(item,index) in concateResource.slice(0, 3)" :style="{
			 	 backgroundImage:`url(${item.poster})`,
			 	 width: `calc(100% / ${concateResource.length})`
			  }" v-if="getType(item.suffix[0])=='video'" :key="item.the_key" class="img">
				<u-icon name="play-circle" color="#fff"></u-icon>
				<text v-if="index == 2">查看详情</text>
				<text v-else>播放</text>
			</view>
		</view>
		<view  v-if="local_post.sorted && concateResource.length>0" class="top">
			<view  @click="getType(item.suffix[0])=='video'?openVideo(item,index):opneImg(item,index)" v-for="(item,index) in concateResource" :key="item.the_key" :style="{
				 backgroundImage:`url(${item.poster||item.path})`,
				 width: `calc(100% / ${concateResource.length>=3?3:concateResource.length})`
			 }" class="img">

				<u-icon v-if="getType(item.suffix[0])=='video'" name="play-circle" color="#fff"></u-icon>
				<text v-if="getType(item.suffix[0])=='video'">播放</text>

			</view>
		</view>
		<view class="center">
			<view class="user_info">
				<view class="left">
					<view class="avatar" :style="{
						'background-image':`url(${local_post.avatar})`
					}"></view>
					<view class="info">
						<text class="u-name">{{local_post.uname}}</text>
						<view class="follow">
							<text class="ki">粉丝：</text>
							<text class="val">{{local_post.followes}}</text>
						</view>
					</view>
				</view>
				<view @click="follow(local_post.isFollow)" class="right">
					<u-icon :name="local_post.isFollow?'bookmark-fill':'checkbox-mark'" size="50"
						:color="local_post.isFollow?'#3c9cff':'#398ade'"></u-icon>
					<text>{{local_post.isFollow?'关注':'已关注'}}</text>
				</view>
			</view>

		</view>
		<view class="bottom">
			<view class="bottom-contents"
			
			:class="(concateResource.length>0&&local_post.title!==''&&local_post.contents !== '')?openContentAnimate[0]:'auto-height-content'"
			>
				<view v-if="local_post.title" class="title">
					<text
						:class="(concateResource.length>0&&rowAnimateCount%2==0)?'title-content':'no-content-title-content'">{{post.title}}</text>
						<view v-if="concateResource.length>0" class="icon_item" :class="transRowAnimate[0]">
							<u-icon  @click="openContent" name="arrow-up" class="round-able" color="#3c9cff" />
						</view>
				</view>
				<!-- 
				 :class="(rowAnimateCount%2==0&&concateResource.length>0&&local_post.title!=='')?'close-content':'open-content'"
				 -->
				<view
					
					class="post-intureduce"
					>
					<view v-if="local_post.contents !== ''" :class="local_post.title!==''?'content':'content-no-title'">
						<text>{{local_post.contents}}</text>
					</view>
					<view v-if="local_post.tags.length" class="tags">
						<text class="item" v-for="(item,index) in local_post.tags" :key="index">#{{item}}</text>
					</view>
				</view>
			</view>
			<LittleTools :items="contentBottoms" />
			<view class="tools">
				<view @click="thumbed_up(local_post.state_info.thumbed,local_post.state_info.thumbs_down)"
					class="thumbed item">
					<u-icon class="tools-icon" :name="local_post.state_info.thumbed?'thumb-up-fill':'thumb-up'"
						color="#2979ff" size="48"></u-icon>
					<text>点赞：{{local_post.thumbs}}</text>
				</view>
				<view @click="thumbed_down(local_post.state_info.thumbed,local_post.state_info.thumbs_down)"
					class="thumbs_down item">
					<u-icon class="tools-icon" :name="local_post.state_info.thumbs_down?'thumb-down-fill':'thumb-down'"
						color="#2979ff" size="48"></u-icon>
					<text>踩它：{{local_post.thumbs_down}}</text>
				</view>
				<view @click="share_that" class="share item">
					<u-icon class="tools-icon" name="share-fill" color="#2979ff" size="48"/>
					<text>分享</text>
				</view>
				<view @click="get_common" class="comment item">

					<u-icon class="tools-icon" name="chat-fill" color="#2979ff" size="48"></u-icon>
					<u-badge numberType="limit" type="primary " max="99" style="z-index: 999;" :absolute="true"
						:offset="[0,-20]" :value="commonLength" />
					<text>评论</text>

				</view>
			</view>
		</view>
		<view v-if="commonLength>=10" class="reviews">
			<ReviewComponent v-for="(item,index) in local_post.commens" :review="item" :key="item.id" />
		</view>
		<view v-else class="watch-more">
			<text>查看评论</text>
			<u-icon name="arrow-right-double" color="#2979ff"></u-icon>
		</view>
	</view>
</template>

<script>
	import mixAnimate from "@/mixins/play_animate.js"
	export default {
		name: "BigImage",
		data() {
			return {
				rowAnimateCount: 0,
				local_post: null,
			}
		},
		methods: {
			getType(i) {
				let pic = [".png", ".gif"]
				if (pic.includes(i)) {
					return "img"
				}

				return "video"
			},


			openContent() {
				this.rowAnimateCount += 1
			},
			thumbed_up(up, down) {
				console.log(up, down);
				if (down) {
					this.local_post.state_info.thumbs_down = !down
					this.local_post.thumbs_down -= 1
				}
				this.local_post.state_info.thumbed = !up
				if (this.local_post.state_info.thumbed) {
					this.local_post.thumbs += 1
				} else {
					this.local_post.thumbs -= 1
				}

			},
			thumbed_down(up, down) {
				// console.log(up,down);
				if (up) {
					this.local_post.state_info.thumbed = !up;
					this.local_post.thumbs -= 1
				}
				this.local_post.state_info.thumbs_down = !down
				if (this.local_post.state_info.thumbs_down) {
					this.local_post.thumbs_down += 1
				} else {
					this.local_post.thumbs_down -= 1
				}

			},
			share_that() {

			},
			get_common() {

			},
			follow(state) {
				if (this.local_post.isFollow) {
					this.local_post.followes += 1
				} else {
					this.local_post.followes -= 1
				}
				this.local_post.isFollow = !state;
			},
			opneImg(item, index) {
				// if (index == 2) {
				// 	return
				// }
				uni.navigateTo({
					url: `/pages/ShowMedia/ShowMedia?media=${encodeURIComponent(JSON.stringify(this.concateResource))}&item=${encodeURIComponent(JSON.stringify(item))}`
				})
			},
			openVideo(item, index) {
				// if (index == 2) {
				// 	return
				// }
				console.log(item);
			}
		},
		props: {
			post: {
				type: Object,
				required: true
			}
		},
		computed: {
			concateResource() {
				if (this.local_post.imgs.concat(this.local_post.videos).length == 0) {
					return []
				}
				if (this.local_post.sorted) {
					let sorted = this.local_post.imgs.concat(this.local_post.videos).map(i => {
						return {
							suffix: /\.[^/.]+$/.exec(i.path),
							path: i.path,
							the_key: i.id,
							poster: i.poster || i.path,
							sort_index: i.sort_index
						}
					}).sort((a, b) => {
						return a.sort_index - b.sort_index
					})
					console.log(sorted.length);
					return sorted;
				} else {
					return this.local_post.imgs.concat(this.local_post.videos).map(i => {
						return {
							suffix: /\.[^/.]+$/.exec(i.path),
							path: i.path,
							the_key: i.id,
							poster: i.poster || i.path,
							sort_index: i.sort_index
						}
					})
				}
			},

			transRowAnimate() {
				return this.playAnimateMixed(['icon_item', 'down-row', 'up-row'], this.rowAnimateCount)
			},
			openContentAnimate(){
				return this.playAnimateMixed(['bottom-contents', 'open-content','close-content',], this.rowAnimateCount)
			},
			contentBottoms() {
				return [{
					name: "eye",
					text: this.local_post.viewed
				}, {
					name: "chat",
					text: this.commonLength
				}, {
					name: "clock",
					text: this.local_post.time
				}]
			},
			commonLength() {
				return this.local_post.commens.length
			}

		},
		mixins: [mixAnimate],
		beforeMount() {
			if (this.post) {
				this.local_post = {
					...this.post
				}
			}

		}

	}
</script>

<style lang="scss" scoped>
	@import 'classes.scss';

	.content-arrow_ {
		text-indent: 0;
	}

	.content {
		box-sizing: border-box;
		padding: 8rpx;


		.top {
			display: flex;

			.img {
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;

			}

			.video,
			.img {
				height: 290rpx;
				border-radius: 5rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				color: #fff;
			}
		}

		.center {
			.user_info {
				width: 100%;
				height: 100rpx;
				margin-top: 10rpx;
				box-shadow: $g-shadow;
				padding-inline: 15rpx;
				box-sizing: border-box;
				display: flex;
				// padding: 5rpx;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;

					.avatar {
						width: 95rpx;
						height: 95rpx;
						border-radius: 50%;
						background-size: cover;
						background-repeat: no-repeat;
						background-position: center;
					}

					.info {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: center;
						color: $font-color;
						margin-left: 20rpx;

						.u-name {
							font-weight: 500;
							color: #000;
						}

						.follow {
							font-size: 14px;
						}
					}
				}

				.right {
					width: 160rpx;
					height: 50rpx;
					border-radius: 40rpx;
					border: solid 6rpx $u-primary;
					display: flex;
					padding-inline: 10rpx;
					align-items: center;
					justify-content: space-evenly;
					color: $u-primary;
					white-space: nowrap;

					&:active {
						scale: 1.2;

					}
				}
			}
		}

		.bottom {
			
			margin: 13rpx 0;
			box-shadow: $g-shadow;
			width: 100%;
			padding: 5rpx;
			box-sizing: border-box;
			.bottom-contents{
				overflow: hidden;
				max-height: 60rpx;
			}
			.auto-height-content{
				height: auto;
			}

			.title {
				display: flex;
				align-items: flex-start;
				justify-content: space-evenly;
				text-align: start;
				padding: 0 15rpx;
				text-indent: 70rpx;
				box-sizing: border-box;
				position: relative;
				margin-top: 10rpx;

				&-content {
					

					font-weight: 500;
					text-indent: 70rpx;
					text-overflow: ellipsis;
					// width: 800rpx;
					line-clamp: 1;
					overflow: hidden;
					-webkit-box-orient: vertical;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					// height: 40rpx;
				}

				// .no-content-title-content {
				// 	height: auto;
				// 	overflow: visible;
				// 	width: 100%;
					
					
				// }

				.icon_item {
					position: relative;
					border: solid 2rpx $u-primary;
					padding: 5rpx;
					border-radius: 50%;
					width: 30rpx;
					height: 30rpx;
					font-size: 12px;
					display: flex;
					align-items: center;
					justify-content: center;
					// box-sizing: border-box;
					text-indent: 0;
					// margin-top: 15rpx;
				}
			}

			// .post-content-nd {
			// 	height: auto;
				
			// }

			// .post-content-d {
			// 	height: 0rpx;
			// }

			.post-intureduce {
				height: auto;
				
				overflow: hidden;
				padding: 0 15rpx;
				box-sizing: border-box;

				.content {
					// height: 200rpx;
					text-indent: 50rpx;
					color: $font-color;
					font-size: 14px;
				}

				.content-no-title {
					font-weight: 500;
					text-indent: 70rpx;
				}

				.tags {
					width: 100%;
					margin: 10rpx 0;
					text-indent: 0rpx;
					font-size: 14px;
					color: $font-color;

					.item {
						background-color: rgba($u-primary, 0.1);
						padding: 3rpx 15rpx;
						margin-right: 10rpx;
						border-radius: 20rpx;
					}
				}
			}


			.content-bottom {
				display: flex;
				width: 100%;
				align-items: center;
				justify-content: space-evenly;
				margin-top: 7rpx;
				background-color: rgba($u-primary, 0.1);
				color: $font-color;

				.items {
					display: flex;
					margin-right: 15rpx;

					.text {
						font-size: 14px;
						margin-inline: 10rpx;
					}
				}
			}

			.tools {
				width: 100%;
				height: 90rpx;
				box-sizing: border-box;
				margin-top: 10rpx;
				box-shadow: $g-shadow;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				background-color: rgba($u-primary, 0.1);

				.item {
					text-align: center;
					font-size: 12px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;

					.tools-icon {
						&:active {
							scale: 1.3;
						}
					}
				}
			}
		}

		.reviews {
			width: 100%;
			// height: 30rpx;
			box-shadow: $g-shadow;
			margin-top: 8rpx;
			box-sizing: border-box;
			// background-color: rgba($u-primary, 0.1);

		}

		.watch-more {
			width: 100%;
			color: rgba($u-primary, 0.9);
			text-align: center;
			box-shadow: $g-shadow;
			margin-top: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5rpx 15rpx;
			box-sizing: border-box;
		}
	}
</style>